<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, toRefs } from 'vue';
import * as echarts from 'echarts';

const props = defineProps<{
  option: echarts.EChartsOption
}>();

const { option } = toRefs(props);
const chartRef = ref<HTMLElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    chartInstance.setOption(option.value);
  }
});

watch(option, (newOption) => {
  if (chartInstance) {
    chartInstance.setOption(newOption);
  }
}, { deep: true });

</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style> 